<template>
  <view class="sfCode">
    <view class="sc-input">
      <input type="tel" placeholder="请输入验证码" maxlength="6" v-model="form.code" />
    </view>
    <view class="sc-btn" @tap="onSend" :class="{ lock: lock }">{{ lock ? leftTime + 's' : '获取验证码' }}</view>
  </view>
</template>
<script>
export default {
  props: ['form'],
  data() {
    return {
      lock: false,
      leftTime: 0
    }
  },
  methods: {
    onSend() {
      if (this.lock) {
        return
      } else {
        this.lock = true
        this.sendCode()
          .then((res) => {
            let t = 60
            this.leftTime = t
            let tid = setInterval((res) => {
              t--
              this.leftTime = t
              if (t == 0) {
                this.lock = false
                clearInterval(tid)
              }
            }, 1e3)
          })
          .catch((err) => {
            this.lock = false
          })
      }
    },
    sendCode() {
      console.log(`发送验证码`)
      return Promise.resolve()
    }
  },
  mounted() {}
}
</script>
